<!--
 * @Description: 飞机
 * @Author: bxsdhx
 * @Date: 2024-02-21 17:56:48
 * @LastEditTime: 2024-02-21 21:29:31
 * Copyright (C) 2024 bxsdhx. All rights reserved.
-->
<template>
  <div
    class="aircraft"
    :style="{
      top: info.y + 'px',
      left: info.x + 'px',
      width: data.w + 'px',
      height: data.h + 'px',
    }"
  >
    <div
      v-if="info.type !== 'player' && info.status"
      class="blood"
      :style="{ '--blood-width': (info.blood / data.blood) * 100 + '%' }"
    ></div>
    <img v-if="info.status" :src="data.t" :width="data.w" :height="data.h" />
    <img v-if="!info.status" :src="data.f" :width="data.w" :height="data.h" />
  </div>
</template>
<script setup lang="ts">
import type { PropType } from "vue";
import type { Aircraft } from "@/type";
import { computed } from "vue";
import aircraft from "@/components/aircraft";
const props = defineProps({
  info: {
    type: Object as PropType<Aircraft>,
    default: {},
  },
});
const data = computed(function () {
  return aircraft[props.info.type];
});
</script>
<style scoped lang="scss">
.aircraft {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  .blood {
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    width: 100%;
    height: 4px;
    border-radius: 3px;
    border: 1px solid black;
    background-color: #c3c8c9;
    &::after {
      content: "";
      width: var(--blood-width);
      height: 100%;
      background-color: red;
      display: block;
      transition: width 300ms;
    }
  }
}
</style>
